<script setup lang="ts">
import { isFunction } from '@/utils/typeof'
import { useWindowSize } from '@vueuse/core'

defineOptions({
  name: 'ProFormPanel',
})

withDefaults(defineProps<{
  mode: 'drawer' | 'modal'
  loading?: boolean
  maxWidth?: number
}>(), {
  mode: 'drawer',
  loading: false,
  maxWidth: 630,
})

const attrs = useAttrs()
const slots = useSlots()
const { width } = useWindowSize()

const onBeforeOk = async () => {
  try {
    if (isFunction(attrs.onConfirm)) {
      return attrs.onConfirm()
    }
    return true
  } catch {
    return false
  }
}
</script>

<template>
  <a-drawer
    v-if="mode === 'drawer'"
    :width="width >= maxWidth ? maxWidth : '100%'"
    v-bind="attrs"
    :mask-closable="true"
    @before-ok="onBeforeOk"
  >
    <a-spin :loading="loading" tip="数据获取中..." style="width: 100%; height: 100%;">
      <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
        <slot :key="key" :name="key" v-bind="scoped" />
      </template>
    </a-spin>
  </a-drawer>

  <a-modal
    v-if="mode === 'modal'"
    :modal-style="{ maxWidth: `${maxWidth}px` }"
    width="90%"
    v-bind="attrs"
    @before-ok="onBeforeOk"
  >
    <a-spin :loading="loading" tip="数据获取中..." style="width: 100%; height: 100%;">
      <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
        <slot :key="key" :name="key" v-bind="scoped" />
      </template>
    </a-spin>
  </a-modal>
</template>

<style scoped>

</style>
